<script setup lang="ts">
import { useRouter } from 'vue-router'

defineProps({
  iconName: {
    type: String,
    default: 'icon-shoucang'
  },
  iconColor: {
    type: String,
    default: '#eb6957'
  },
  item: {
    type: Object,
    default: () => ({})
  }
})

const router = useRouter()
const gotoPath = (path: string) => {
  router.push({
    path: `${path}`
  })
}
</script>

<template>
  <div class="collfootBox">
    <div class="title" @click="gotoPath(item.appUrl)">
      <svg-icon :color="iconColor" className="iconBox" :iconName="iconName"></svg-icon>
      <span class="singeLine">{{ item.appName }}</span>
    </div>
    <div class="info">
      <span class="name singeLine">{{ item.username }}</span>
      <span class="time">{{ item.createData.split(' ')[0] }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">
.collfootBox {
  display: grid;
  grid-template-columns: 1fr 110px;
  margin: 0.625rem 0;
  max-width: 100%;
  overflow: hidden;

  .title {
    display: flex;
    align-items: center;
    height: 1.25rem;

    .iconBox {
      font-size: 0.875rem;
      vertical-align: middle;
    }

    span {
      color: var(--cnac-text2);
      font-size: 0.75rem;
      margin-left: 0.625rem;
      text-decoration: underline;
      max-width: 10.25rem;
      cursor: pointer;
    }
  }

  .info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 1.25rem;

    .name {
      width: 2.25rem;
      max-width: 2.25rem;
    }

    .time {
      width: 4.5rem;
      margin-left: 0.5rem;
      max-width: 4.5rem;
    }

    .look {
      width: 3.625rem;
      margin-left: 0.3125rem;
      max-width: 3.625rem;

      .iconBox {
        vertical-align: middle;
      }
    }

    span {
      display: inline-block;
      font-size: 0.75rem;
      color: #999;
    }
  }
}
</style>
